<template>
    <div class='bot_nav_box'>
        <router-link to='/home'>
          <div class='iconfont icon-home'></div>
          <div class="text">首页</div>
        </router-link>
        <router-link to='/goodscategory'>
          <div class='iconfont icon-fenlei'></div>
          <div class="text">分类</div>
        </router-link>
        <router-link to='/cart'>
          <div class='iconfont icon-cart'></div>
          <div class="text">购物车</div>
        </router-link>
        <router-link to='/user'>
          <div class='iconfont icon-user'></div>
          <div class="text">{{name ? "我的" : "个人"}}</div>
        </router-link>
    </div>
</template>
<script>
// @ is an alias to /src
export default {
    name: 'XXX',
    data() {
        return {
        
        }
    },
    computed: {
      name(){return this.$store.state.userInfo.name}
    },
    components: {
        
    }
}
</script>
<style lang="less" >
  .bot_nav_box{
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0px -3px 6px 4px #eee;
    a{
      display: block;
      text-decoration: none;
      flex: 1;
      color:#333;
      .iconfont{
        font-size: 20px;
      }
      .text{
        font-size: 16px;
      }
    }
    a.router-link-active{
      color:rgb(240, 182, 35)
    }
  }
</style>